import React from "react";
import { DiscoverItem_style, TextContent } from "./DiscoverItem.style";
import loading from "../../../../assets/images/loading.gif";

//懒加载
import LazyLoad from "react-lazyload";

const DiscoverItem = (props) => {
  const { item } = props;

  return (
    <DiscoverItem_style>
      <div className="DiscoverItem_img">{}
        <LazyLoad
          placeholder={<img src={loading} width="100%" height="100%" />}
        >
          <img src={item.imgsrc1} alt="" style={{ borderRadius: 10 }} />
        </LazyLoad>
      </div>
      <TextContent>
        <div className="DiscoverItem_name">
          <svg className="icon" aria-hidden="true">
            <use xlinkHref="#icon-hu"></use>
          </svg>
        {item.name}
        </div>
        <div className="DiscoverItem_text">&nbsp;&nbsp;&nbsp;{item.text}</div>
        <div className="DiscoverItem_author">
          <img src={item.imgsrc2} alt="" />
          &nbsp;{item.author}
        </div>
        <div className="DiscoverItem_like">
          <svg className="icon" aria-hidden="true" >
            <use xlinkHref="#icon-like"></use>
          </svg>
          &nbsp;{item.likeNumber}
        </div>
      </TextContent>
    </DiscoverItem_style>
  );
};

export default DiscoverItem;
